import React from 'react';
import { inject, observer } from 'mobx-react';
import { Button, message, Tooltip } from 'antd';
import { WeaUpload, WeaInputSearch, WeaTab, WeaLocaleProvider } from 'ecCom';
import { toJS } from 'mobx';
import { WeaDocFilePath } from '../../public';

const getLabel = WeaLocaleProvider.getLabel;


@inject('netDiskStore')
@observer
class ToolBar extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         shareTabData: [
            {
               key: 'myShare',
               title: getLabel(514020, '我的分享'),
            },
            {
               key: 'colleagueShare',
               title: getLabel(514021, '同事的分享'),
            },
         ],
      };
   }

   // 切换视图
   changeViewClick = () => {
      const { changeView } = this.props.netDiskStore;
      changeView();
   };

   // 功能区按钮点击事件
   operateFunction = (e, type) => {
      const { viewSettings: set, rightMenu: { rightHandle_newFolder, rightHandle_delete }, transportData, setShareData } = this.props.netDiskStore;
      switch (type) {
         case 'upload':
            transportData.ref.throwMethod.uploadFile();
            break;
         case 'newFolder':
            rightHandle_newFolder();
            break;
         case 'delete':
            rightHandle_delete();
            break;
         case 'download':
            open(`/weaver/weaver.file.FileDownload?fileid=63622&download=1${window.__moudleParams}`);
            break;
         case 'share':
            setShareData({ visible: true });
            break;
         case 'publish':
            break;
         case 'cancelShare':
            break;
         case 'save':
            break;
         default:
            break;
      }
   };

   // 改变视图类型
   tabChange = (v) => {
      const { changeShareTabSelect } = this.props.netDiskStore;
      changeShareTabSelect(v);
   };


   render() {
      const { topSelectedKey, shareTabSelectedKey, viewSettings, operationButtons: Opera } = this.props.netDiskStore;


      return (
         <div className="netDisk-ToolBar">
            {
               topSelectedKey === 'netDisk'
                  ?
                     <div className="buttonGroup">
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kb0e24`} type="ghost" onClick={(e) => {
 this.operateFunction(e, 'upload'); 
}}>
                           <i className="icon-coms-upload" />{getLabel(20798, '上传文件')}
                        </Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vvwmwa`} type="ghost" onClick={(e) => {
 this.operateFunction(e, 'newFolder'); 
}}>
                           <i className="icon-coms-Add-to" />{getLabel(513708, '新建目录')}
                        </Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@bontaj`} type="ghost" disabled={Opera.download} onClick={(e) => {
 this.operateFunction(e, 'download'); 
}}>
                           <i className="icon-coms-download2" />{getLabel(514011, '下载')}
                        </Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@8deuy1`} type="ghost" disabled={Opera.share} onClick={(e) => {
 this.operateFunction(e, 'share'); 
}}>
                           <i className="icon-coms-Batch-sharing" />{getLabel(0, '分享')} {/* todo 多语言 */}
                        </Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5wybbl`} type="ghost" disabled={Opera.publish} onClick={(e) => {
 this.operateFunction(e, 'publish'); 
}}>
                           <i className="icon-coms-Release" />{getLabel(514023, '发布到系统')}
                        </Button>
                        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x41c14`} type="ghost" disabled={Opera.delete} onClick={(e) => {
 this.operateFunction(e, 'delete'); 
}}>
                           <i className="icon-coms-delete" />{getLabel(91, '删除')}
                        </Button>
                     </div>
                  :
               topSelectedKey === 'share'
                  ?
                     <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@qihqeq`}
                       className="shareTab"
                       datas={this.state.shareTabData}
                       keyParam="key"
                       selectedKey={shareTabSelectedKey}
                       onChange={this.tabChange}
                     />
                  :
                     null
            }

            <div className="operates">
               {
                  topSelectedKey === 'share'
                     ?
                        <div className="buttonGroup2">
                           {
                              shareTabSelectedKey === 'myShare'
                                 ?
                                 <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@kfkwkh`} disabled={Opera.cancelShare} onClick={(e) => {
 this.operateFunction(e, 'cancelShare'); 
}}>
                                    <i className="icon-coms-go-back" />{getLabel(514019, '取消分享')}
                                 </Button>
                                 :
                              shareTabSelectedKey === 'colleagueShare'
                                 ?
                                 <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@s6o0de`} disabled={Opera.save} onClick={(e) => {
 this.operateFunction(e, 'save'); 
}}>
                                    <i className="icon-coms-Save-as" />{getLabel(514022, '保存到云盘')}
                                 </Button>
                                 :
                                    null
                           }
                           <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yypwno`} disabled={Opera.download} style={{ marginLeft: 10 }} onClick={(e) => {
 this.operateFunction(e, 'download'); 
}}>
                              <i className="icon-coms-download2" />{getLabel(514011, '下载')}
                           </Button>
                        </div>
                     :
                        null
               }
               <Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@vxmb3f`} placement="top" title={viewSettings.type === 'icon' ? getLabel(82532, '列表视图') : getLabel(129214, '图标视图')} getTooltipContainer={a => a.parentNode}>
                  <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yr2kd6`} type="ghost" onClick={this.changeViewClick} className={'operate-View'}>
                     <i className={viewSettings.nowIcon} />
                  </Button>
               </Tooltip>
            </div>
         </div>
      );
   }
}


@inject('netDiskStore')
@observer
class PathSearch extends React.Component {
   // 点击路径Item
   clickPath = (newPath, pathKey, e) => {
      const { pathSearch } = this.props.netDiskStore;
      const { setPathSearchData } = pathSearch;
      let result = {};
      // 在搜索后，如果点击home homeTab，将pathSearchValue置为空
      if ((pathKey === 'home' || pathKey === 'homeTab') && pathSearch.searchValue.length !== 0) {
 result.searchValue = ''; 
}
      result.path = newPath;
      console.log(newPath, pathKey, result);
      setPathSearchData(result);
      // console.log(newPath, pathKey, e);
   };

   // 点击搜索
   inputSearch = (value) => {
      const { pathSearch: { setPathSearchData } } = this.props.netDiskStore;
      setPathSearchData({ searchValue: value });
      console.log('搜索', value);
   };

   // 返回上一层路径
   pathBack = () => {
      const { pathSearch } = this.props.netDiskStore;
      const { setPathSearchData } = pathSearch;
      let newPath = [...pathSearch.path]; newPath.pop();
      setPathSearchData({ path: newPath });
   };

   render() {
      const { pathSearch: { searchValue, path, homeTab } } = this.props.netDiskStore;

      return (
         <div className="netDisk-PathSearch">
            <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@srrvo1`} className="back-btn" type="ghost" onClick={this.pathBack}><i className="icon-coms-Revoke2" /></Button>
            <WeaDocFilePath ecId={`${this && this.props && this.props.ecId || ''}_WeaDocFilePath@vwymhf`} className="Breadcrumb" path={toJS(path)} onClick={this.clickPath} search={true} homeTab={homeTab} searchValue={searchValue} />
            <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@qd68ba`} className="Search" placeholder={getLabel(126309, '搜索文档')} onSearch={this.inputSearch} />
         </div>
      );
   }
}


export {
   ToolBar,
   PathSearch,
};
